

// 引入公共样式
require('../../assets/css/css.less')

// 引入css样式
require('./courseTrain.less')

// 获取axios工具函数
const request = require('../../utils/request')

// 引入tabbar渲染函数
const renderTabbar = require('../../utils/tabbar')

// 引入navTabbar渲染函数
const renderNavTabbar = require('../../utils/navTabbar')

// 加载
window.onload = () => {
    // 渲染tabbar
    renderTabbar('courseTrain');
    // 渲染navTabbar
    renderNavTabbar('courseTrain');

    // 获取dom
    const section1 = document.querySelector('.section1');
    const API = 'http://fitness.h5.itsource.cn:3701';
    const section2=document.querySelector('.section2')
    // 获取数据
    function getData() {
        request.get('/api/train/courseList').then(res => {
            // 解构数据
            let { errno, data } = res.data;
            // 判断
            if (errno === 0) {
                // 渲染数据
                render(data)
            }
        })
    }
    getData()


    // 渲染函数
    function render(data) {
        // 最新课程数据
        let data1 = data[0]
        // 最新课程html
        let html1 = `
        <img src="${API + data1.imgurl}" alt="" class="image">
        <p class="candy">${data1.name}</p>
        <p class="taste">${data1.desc}</p>
    `
        // 最新课程渲染
        section1.innerHTML = html1;

        // 
        section1.href=`./course-detail.html?id=${data1.courseId}`

        // 获取课程列表数据
        const data2 = data.filter((v, i) => i !== 0);
        // 列表html
        let html2 = data2.map(v=>
                `<a href="./course-detail.html?id=${v.courseId}" class="back" style="background-image:url(${API + v.imgurl})">
                <p class="empty">${v.name}</p>
                <p class="man">${v.desc}</p>
            </a>`
            ).join('');
        // 创建标签
        const div=document.createElement('div');
        // 增加属性
        div.classList.add('backA');
        // 增加文本
        div.innerHTML=html2
        // 最新课程渲染
        section2.append(div);
    }


}